<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>订单明细</title>
    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
    <style>
        .details-container {
            padding: 16px;
        }

        .order-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .order-table th,
        .order-table td {
            border: 1px solid #e6e6e6;
            padding: 8px 6px;
            font-size: 14px;
            text-align: center;
        }

        .order-table th {
            background: #f7f7f7;
        }

        .order-table .total-row {
            font-weight: bold;
            background: #f0f9eb;
        }
    </style>
</head>

<body>
    <div id="orderDetailContent">
        <!-- 订单详情内容将通过JavaScript动态加载 -->
        <div style="text-align: center; padding: 50px 0;">
            <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"
                style="font-size: 30px; color: #999;"></i>
            <p style="margin-top: 10px; color: #999;">正在加载订单详情...</p>
        </div>
    </div>

    <!-- 表格模板 -->
    <script type="text/x-handlebars-template" id="orderTableTemplate">
        <div class="details-container">
            <table class="order-table">
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>单据编号</th>
                        <th>创建时间</th>
                        <th>应付金额</th>
                        <th>实付金额</th>
                        <th>支付时间</th>
                        <th>状态</th>
                        <th>用户类型</th>
                        <th>维修技师</th>
                        <th>下次保养时间</th>
                        <th>下次保养里程</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this}}
                    <tr class="{{#if isTotal}}total-row{{/if}}">
                        <td>{{#if isTotal}}总计{{else}}{{codeNum}}{{/if}}</td>
                        <td>{{oddNumber}}</td>
                        <td>{{createTime}}</td>
                        <td>{{payablePrice}}</td>
                        <td>{{payPrice}}</td>
                        <td>{{payTime}}</td>
                        <td>{{getStateName state}}</td>
                        <td>{{getUserTypeName userType}}</td>
                        <td>{{serviceTechnicianMation.userName}}</td>
                        <td>{{nextServiceTime}}</td>
                        <td>{{nextServiceMileage}}</td>
                        <td>{{remark}}</td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
    </script>

    <script src="../../assets/lib/layui/layui.js"></script>
    <script src="../../assets/lib/layui/custom.js"></script>
    <script type="text/javascript">
        layui.config({ base: '../../js/keepFitOrder/' }).use('dayKeepFitOrderList');
    </script>
</body>

</html>